import React, {Component} from 'react';
import {Button, Col, Form, Input, Row, Space, Table} from 'antd';
import {DeleteOutlined, DownOutlined, PlusOutlined, SearchOutlined, UpOutlined} from "@ant-design/icons";

class Cms extends Component {

    state = {
        expand: true
    };

    columns = [
        {
            title: '标题',
            dataIndex: 'name',
        },
        {
            title: '内容',
            dataIndex: 'age',

        },
        {
            title: '关键字',
            dataIndex: 'address',

        }, {
            title: '阅读量',
            dataIndex: 'content',

        }, {
            title: '是否上线',
            dataIndex: 'isFlag',

        }, {
            title: '备注',
            dataIndex: 'remark',

        },
        {
            title: '操作',
            key: 'action',
            render: (text, record) => (
                <Space size="middle">
                    <a>编辑</a>
                    {/*<a>删除</a>*/}
                </Space>
            ),
        },
    ];

    getData = () => {
// noinspection JSAnnotator
        const data = [];
        for (let i = 0; i < 100; i++) {
            const sss = {};
            sss.key = i;
            sss.name = "小荷才露尖尖角" + i;
            sss.age = i;
            sss.address = "河南省郑州市" + i;
            sss.content = 1000 + i;
            if (i % 2 == 0) {
                sss.isFlag = "已上线";
            } else {
                sss.isFlag = "未上线";
            }
            sss.remark = "河南省郑州市" + i;
            data.push(sss);

        }


        return data;
    };


    onChange = (pagination, filters, sorter, extra) => {
        console.log('params', pagination, filters, sorter, extra);
    };

    render() {
        return (
            <div>

                <div>
                    <Form
                        name="advanced_search"
                        className="ant-advanced-search-form"
                        onFinish={this.onFinish}>
                        <Row>
                            <Col span={3} style={{textAlign: 'right'}}>
                                <Button type="primary" htmlType="add" icon={<PlusOutlined/>}>
                                    添加
                                </Button>
                                <Button type="primary" style={{margin: '0 8px'}} icon={<DeleteOutlined/>}>
                                    删除
                                </Button>

                            </Col>

                            <Col span={21}>
                                <Row>
                                    <Col>
                                        <Form.Item>

                                            <Input placeholder="请输入查询名称"/>
                                        </Form.Item>
                                    </Col>
                                    <Col>
                                        <Form.Item>

                                            <Input placeholder="请输入标题"/>
                                        </Form.Item>
                                    </Col>
                                    <Col>
                                        <Form.Item>

                                            <Input placeholder="请输入作者名称"/>
                                        </Form.Item>
                                    </Col>
                                    <Col>
                                        <Button style={{margin: '0 8px'}} type="primary" icon={<SearchOutlined/>}>
                                            查询
                                        </Button>
                                        <a
                                            style={{fontSize: 12}}
                                        >
                                            {this.state.expand ? <UpOutlined/> : <DownOutlined/>} 更多...
                                        </a>
                                    </Col>


                                </Row>

                            </Col>

                        </Row>


                    </Form>


                </div>


                <Table columns={this.columns} dataSource={this.getData()} onChange={this.onChange}></Table>


            </div>
        );
    }
}

export default Cms;
